<template>
  <view class="container">
    
    <Card class="form-card">
      <view class="form-group">
        <text class="label">学生姓名</text>
        <input 
          class="input" 
          type="text" 
          placeholder="请输入学生姓名" 
          v-model="form.name"
        />
      </view>
      
      <view class="form-group">
        <text class="label">年级</text>
        <picker 
          mode="selector" 
          :range="grades" 
          @change="onGradeChange"
        >
          <view class="picker">
            {{ selectedGrade || '请选择年级' }}
          </view>
        </picker>
      </view>
      
      <view class="form-group">
        <text class="label">性别</text>
        <view class="radio-group">
          <label class="radio-item">
            <radio 
              value="male" 
              :checked="form.gender === 'male'" 
              @click="form.gender = 'male'"
            /> 男
          </label>
          <label class="radio-item">
            <radio 
              value="female" 
              :checked="form.gender === 'female'" 
              @click="form.gender = 'female'"
            /> 女
          </label>
        </view>
      </view>
      
      <view class="form-group">
        <text class="label">出生日期</text>
        <picker 
          mode="date" 
          :value="form.birthDate" 
          @change="onDateChange"
        >
          <view class="picker">
            {{ form.birthDate || '请选择出生日期' }}
          </view>
        </picker>
      </view>
      
      <view class="form-group">
        <text class="label">备注信息</text>
        <textarea 
          class="textarea" 
          placeholder="请输入备注信息（可选）" 
          v-model="form.remark"
        />
      </view>
      
      <Button 
        class="submit-btn" 
        type="primary" 
        text="创建账户" 
        :loading="loading"
        @click="handleSubmit"
      />
    </Card>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        grade: '',
        gender: 'male',
        birthDate: '',
        remark: ''
      },
      grades: [
        '小学一年级', '小学二年级', '小学三年级', '小学四年级', '小学五年级', '小学六年级',
        '初中一年级', '初中二年级', '初中三年级',
        '高中一年级', '高中二年级', '高中三年级'
      ],
      selectedGrade: '',
      loading: false
    };
  },
  
  methods: {
    onGradeChange(e) {
      this.selectedGrade = this.grades[e.detail.value];
      this.form.grade = this.selectedGrade;
    },
    
    onDateChange(e) {
      this.form.birthDate = e.detail.value;
    },
    
    handleSubmit() {
      if (!this.form.name) {
        uni.showToast({
          title: '请输入学生姓名',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.grade) {
        uni.showToast({
          title: '请选择年级',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.birthDate) {
        uni.showToast({
          title: '请选择出生日期',
          icon: 'none'
        });
        return;
      }
      
      // 模拟创建过程
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        uni.showToast({
          title: '创建成功',
          icon: 'success'
        });
        
        // 返回关联账户列表
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: $spacing-lg;
  padding: $spacing-xl 0;
}

.title {
  font-size: $font-size-xl;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.form-card {
  margin-bottom: $spacing-lg;
}

.form-group {
  margin-bottom: $spacing-lg;
}

.label {
  display: block;
  font-size: $font-size-base;
  color: $text-primary;
  margin-bottom: $spacing-sm;
}

.input, .picker, .textarea {
  width: 100%;
  padding: $spacing-base;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  box-sizing: border-box;
}

.input {
  height: 100rpx;
}

.picker {
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.textarea {
  height: auto;
  min-height: 140rpx;
}

.radio-group {
  display: flex;
  flex-direction: row;
}

.radio-item {
  margin-right: $spacing-lg;
  display: flex;
  flex-direction: row;
  align-items: center;
  
  radio {
    margin-right: $spacing-xs;
  }
}

.submit-btn {
  width: inherit;
  margin-top: $spacing-xl;
}
</style>